

var newer = newer || {};
newer.gd = newer.gd || {};

newer.CirclesSettingsApp = function(o) {
	this.nroot = o.nroot;
	this.contentDivId = "circles-settings-div";
	this.title = "circles-settings";
	this.contents = new Array();
};

newer.CirclesSettingsApp.prototype = {
	
	init: function() {
		$("#" + this.contentDivId).html('<div id="circles-settings-div"><div class="app-title-class">Circles settings</div></div>');
		$("#circles-settings-div").append('<div id="circles-settings-entry"></div>');
		$("#circles-settings-div").append('<div id="circles-settings-frame"></div>');
		this.createComponents();
		
		
		var slider = $('#circles-settings-content').bxSlider({
			controls: false
		});
		
		$('.circles-settings-navi-button').click(function(){
			var index = $('.circles-settings-navi-button').index(this);
			slider.goToSlide(index);
			$('.circles-settings-navi-button').removeClass('circles-settings-navi-button-on');
			$(this).addClass('circles-settings-navi-button-on');
			return false;
		});
		
		$('.circles-settings-navi-button:first').addClass('circles-settings-navi-button-on');
		
		this.update();
	},
	
	createComponents: function() {
		this.createButtons();
		this.createContents();
		
	},
	
	update: function() {
		this.contents[0] = new newer.CircleCreateForm({root:"circles-create-content"});
	},
	
	createButtons: function() {
		$("#circles-settings-entry").append('<div id="circles-settings-entry-wrapper"></div>')
		this.createCreateCircleButton();
		this.createSearchCircleButton();
		this.createMatchCircleButton();
	},
	
	createCreateCircleButton: function() {
		$("#circles-settings-entry-wrapper").append('<div id="circles-create-button" class="link-like-element circles-settings-navi-button">Create circle</div>');
	},
	
	createSearchCircleButton: function() {
		$("#circles-settings-entry-wrapper").append('<div id="circles-search-button" class="link-like-element circles-settings-navi-button">Search circle</div>');
	},
	
	createMatchCircleButton: function() {
		$("#circles-settings-entry-wrapper").append('<div id="circles-match-button" class="link-like-element circles-settings-navi-button">See recommand</div>');
	},
	
	createContents: function() {
		$("#circles-settings-frame").append('<div id="circles-settings-content"></div>');
		$("#circles-settings-content").append('<div id="circles-create-content" class="circles-settings-content2"></div>')
			.append('<div id="circles-search-content" class="circles-settings-content2"></div>')
			.append('<div id="circles-match-content" class="circles-settings-content2"></div>');
		this.createCreateCircleContent();
		this.createSearchCircleContent();
		this.createMatchCircleContent();
	},
	
	createCreateCircleContent: function() {
		$("#circles-create-content").html("Creating circle..");
	},
	
	createSearchCircleContent: function() {
		var self = this;
		$("#circles-search-content").html("Searching circle..");
		$("#circles-search-content").append('<div id="circles-search-content-name">Circle name:<input id="circles-search-name-input" /></div>');
		$("#circles-search-content").append('<div id="circles-search-submit" class="link-like-element">Submit</div>');
		$("#circles-search-submit").on("click", function() {
			if($("#circles-search-name-input").val() != null) {
				$("#circles-search-result").remove();
				$("#circles-search-content").append('<div id="circles-search-result"></div>');
				self.showCircles({divSelector:"#circles-search-result"});
				/*$.post("/Circles/getCirclesByName", {"cname":$("#circles-search-name-input").val()}, function(circles) {
					if(circles.error != "invalid cname") {
						$.each(circles, function(index, circle) {
							$("#circles-search-result").append("<div><img height=150px id=\"c" + circle.id +"\"></div>")
								.append("<div>"+circle.name+"</div>");
							self.updateCirclePhotoSrc(circle);
						})
					} else {
						//do something
					}
				}, "json");*/
			}
		})
	},
	
	updateCirclePhotoSrc: function(circle) {
		if(circle.hasPhoto==true) {
			$("img#c"+circle.id).attr("src", "/Circles/displayCirclePhoto?cid="+circle.id);
		} else if (circle.hasMap == true) {
			$("img#c"+circle.id).attr("src", "/Circles/displayCircleMap?cid="+circle.id);
		} else {
			$.post("/Circles/updateCircleMap?cid="+circle.id, {}, function(){
				circle.hasMap = true;
				$("img#c"+circle.id).attr("src", "/Circles/displayCircleMap?cid="+circle.id);
			})
		}
	},
	
	showOneCircle: function(circle) {
		var res = "<td><div><img height=150px class='link-like-element' id=\"c" + circle.id +"\"></div><div>"+circle.name+"</div></td>";
		return res;
	},
	
	showCircles: function(options) {
		var defaults = {
			maxw: 5,
			maxh: 3,
			divSelector: "#"
		};
		var settings = $.extend({}, defaults, options);
		var self = this;
		
		$(settings.divSelector).html(settings.divSelector+":<br/>");
		$.post("/Circles/getCirclesByName", {"cname":$("#circles-search-name-input").val()}, function(circles) {
			if (circles.error == "invalid cname") {
				//do something
			} else {
				var numOfCol = 0;
				var numOfRow = 0;
				$(settings.divSelector).append('<table><tbody id="circle-table"><tr id="circle-table-'+numOfRow+'"></tr></tbody></table>');
				$.each(circles, function(index, circle) {
					$('#circle-table-'+numOfRow).append(self.showOneCircle(circle));
					// add click handler
					//$("#c"+circle.id).on("click", {cid:circle.id, self:self},self.gotoCircleHandler).addClass("link-like-element");
//					$("img#c"+circle.id).on("click", {cid:circle.id, self:self}, function(event) {
//						document.location.href='/newer/c/'+event.data.cid+'/t/posts/';
//					});
					$("img#c"+circle.id).on("click", {cid:circle.id, self:self}, newer.CirclesHelper.gotoCircleHandler);
					//update photo
					self.updateCirclePhotoSrc(circle);
					numOfCol++;
					if(numOfCol >= settings.maxw) {
						numOfCol -= settings.maxw;
						numOfRow++;
						$('#circle-table').append('<tr id="circle-table'+numOfRow+'"></tr>');
					}
				});
			}
		}, "json");
	}, 
	
	createMatchCircleContent: function() {
		$("#circles-match-content").html("Matching circle..");
	},
	
	getIcon: function() {
		return '<div><img src="/public/images/green_13.png" style="width:55px;height:55px;" title="Circles Settings"/></div>';
	},
	
	getContent: function() {
		return '<div id="'+this.contentDivId+'"></div>';
	}
};